<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>赌我会瘦</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current detail-page bg-light-gray">
      <header class="bar bar-nav fb-header has-img-header">
        <a href="${ctx.host}/mall" class="pull-left logo"> <img src="${ctx.resource}/images/rule-header-left.png"></a>
        <h1 class="title">
          <img src="${ctx.resource}/images/rule-header-title-black.png">
        </h1>
        <a href="${ctx.host}/profile" class="pull-right user-cover"> <img src="${user.avatar}"></a>
      </header>

      <c:if test="${userBet.status eq 'PROCESSING' and userBet.bet.end}">
        <div class="bar bar-footer fb-footer">
          <a href="${ctx.host}/profile/bets/${userBet.bet.id}/close" class="button button-big fb-button">递交最终成绩</a>
        </div>
      </c:if>
      <c:if test="${userBet.status eq 'FINISHED'}">
        <div class="bar bar-footer fb-footer">
          <c:if test="${userBet.success}">
            <a href="${ctx.host}/profile/withdrawal" class="button button-big fb-button">查看奖金</a>
          </c:if>
          <c:if test="${!userBet.success}">
            <a href="${ctx.host}/mall" class="button button-big fb-button">重新出发</a>
          </c:if>
        </div>
      </c:if>

      <c:if test="${userBet.status eq 'OPENFAILED'}">
        <div class="bar bar-footer fb-footer">
          <a href="${ctx.host}/profile/bets/${userBet.bet.id}/vedio-upload?phase=open&status=reupload" class="button button-big fb-button">重新上传初始视频</a>
        </div>
      </c:if>

      <c:if test="${userBet.status eq 'CLOSEFAILED'}">
        <div class="bar bar-footer fb-footer">
          <a href="${ctx.host}/profile/bets/${userBet.bet.id}/vedio-upload?phase=close&status=reupload" class="button button-big fb-button">重新上传结果视频</a>
        </div>
      </c:if>

      <div class="content">
        <div class="content-padded challenger-info">
          <div class="challenger-cover">
            <%-- <img src="${ctx.resource}/images/challenger-cover.png" alt="" class="img-style"> --%>
            <div class="bet-title">
              ${user.nickname}的${userBet.bet.name}
              <p class="no-margin">
                <fmt:formatDate value="${userBet.bet.startDate}" pattern="yyyy.MM.dd" />
                -
                <fmt:formatDate value="${userBet.bet.endDate}" pattern="yyyy.MM.dd" />
              </p>

              <div class="deadline-text">距离挑战结束</div>
              <div class="deadline clearfix flipclock" data-end="${userBet.bet.endDateString}">
                <c:set var="restDays" value="${userBet.bet.restDays}"></c:set>
		            <!--<div class="section" data-section="year">year</div>-->
		            <div class="item section" data-section="day">DAYS</div>
		            <div class="item section" data-section="hour">HOURS</div>
		            <div class="item section" data-section="minute">MINUTES</div>
		            <div class="item section" data-section="second">SECONDS</div>
              </div>
              <!-- <div class="deadline clearfix" id="clock">
                <c:set var="restDays" value="${userBet.bet.restDays}"></c:set>
                <div class="item">
                  <div class="number">
                    ${restDays[0]}
                  </div>
                  <div>DAYS</div>
                </div>
                <div class="item">
                  <div class="number">${restDays[1]}</div>
                  <div>HOURS</div>
                </div>
                <div class="item">
                  <div class="number">${restDays[2]}</div>
                  <div>MINUTES</div>
                </div>
                <div class="item">
                  <div class="number">${restDays[2]}</div>
                  <div>MINUTES</div>
                </div>
              </div> -->
              <!-- <div style="width: 15rem;">
                <div class="flipclock">
                  <div class="section" data-section="year">year</div>
                  <div class="section" style="display: inline-block; text-align: center;" data-section="day">day</div>
                  <div class="section" style="display: inline-block; text-align: center;" data-section="hour">hour</div>
                  <div class="section" style="display: inline-block; text-align: center;" data-section="minute">min</div>
                  <div class="section" style="display: inline-block; text-align: center;" data-section="second">sec</div>
                </div>
              </div> -->
            </div>
            <%-- <div class="share">
              <a href="${ctx.host}/users/${userBet.user.id}/bets/${userBet.bet.id}/share" style="text-decoration: none; color: #fff;">
                <i class="iconfont icon-share" style="font-size: 1.3rem; display: block; line-height: 1;"></i>分享
              </a>
            </div> --%>
          </div>

          <c:if test="${userBet.status eq 'FINISHED'}">
            <div class="bet-result-statu" style="margin: 1.5rem 0;">
              <c:if test="${userBet.success}">
                <img src="${ctx.resource}/images/bet-success-icon.png" style="display: block; width: 3rem; margin: 0 auto .75rem;">
                <img src="${ctx.resource}/images/bet-success-text.png" style="display: block; width: 12.5rem; margin: 0 auto;">

                <div class="activity-bonus">
                  <div class=" text-center number">
                    <img src="${ctx.resource}/images/success-title.png" style="display: inline-block; height: 1.2rem; vertical-align: middle;" />
                  </div>
                  <div class="text-center">
                    <div class="price clearfix">
                      <span class="item">￥</span>
                      <c:forEach var="bonusSplitItem" items="${userBet.bonusResultSplit}">
                        <span class="item">${bonusSplitItem}</span>
                      </c:forEach>
                    </div>
                  </div>
                </div>

              </c:if>
              <c:if test="${!userBet.success}">
                <img src="${ctx.resource}/images/bet-fail-icon.png" style="display: block; width: 3rem; margin: 0 auto .75rem;">
                <img src="${ctx.resource}/images/bet-fail-text.png" style="display: block; width: 12.5rem; margin: 0 auto;">
              </c:if>
            </div>
          </c:if>

          <c:if test="${userBet.status != 'FINISHED'}">
            <div class="activity-bonus">
              <div class=" text-center number">
                <img src="${ctx.resource}/images/bonus.png" style="display: inline-block; height: 1.2rem; vertical-align: middle;" />
                <c:forEach var="thumbAmountSplitItem" items="${userBet.supportSplit}">
                  <span class="item">${thumbAmountSplitItem}</span>
                </c:forEach>
                人参与
              </div>
              <div class="text-center">
                <div class="price clearfix">
                  <span class="item">￥</span>
                  <c:forEach var="bonusSplitItem" items="${userBet.bonusSplit}">
                    <span class="item">${bonusSplitItem}</span>
                  </c:forEach>
                </div>
              </div>
            </div>

            <div style="padding-left: .75rem; padding-right: .75rem;">
              <img src="${ctx.resource}/images/interval.png" class="img-style" alt="" />
              <div class="progress">
                <div class="progress-text clearfix">
                  <div class="pull-left">看好${userBet.thumbup}</div>
                  <div style="position: absolute; left: 48%;">vs</div>
                  <div class="pull-right">不看好${userBet.thumbdown}</div>
                </div>
                <div class="progress-bar">
                  <div class="progress-bg" style="width: ${userBet.percent}%;"></div>
                </div>
              </div>

              <div class="supporter-layout">
                <c:forEach var="support" items="${supports}" varStatus="status">
                  <div class="supporter-box">
                    <img src="${support.user.avatar}" class="user-cover"> 
                    <div class="content-item"><span style="font-size: .7rem;">${support.user.nickname}</span> <span style="font-size: .7rem;" class="color-red">${support.support ? '看好' : '不看好'}￥<fmt:formatNumber value="${support.price / 100}" pattern="0"></fmt:formatNumber></div>
                    </span>
                  </div>
                  
                  <%-- <c:choose>
                    <c:when test="${status.index eq 0}">
                      <div class="supporter-box" style="width: 8.6rem;">
                        <img src="${support.user.avatar}" class="user-cover"> <span style="font-size: .7rem;">${support.user.nickname}</span> <span style="font-size: .7rem;" class="color-red">${support.support ? '看好' : '不看好'}￥<fmt:formatNumber value="${support.price / 100}" pattern="0"></fmt:formatNumber>
                        </span>
                      </div>
                    </c:when>
                    <c:otherwise>
                      <div class="supporter-box" style="width: 8.6rem;">
                        <img src="${support.user.avatar}" class="user-cover" alt="">
                        <span style="font-size: .7rem;">${support.user.nickname}</span> <span style="font-size: .7rem;" class="color-red">${support.support ? '看好' : '不看好'}￥<fmt:formatNumber value="${support.price / 100}" pattern="0"></fmt:formatNumber>
                        </span>
                      </div>
                    </c:otherwise>
                  </c:choose> --%>
                </c:forEach>
                <img src="${support.user.avatar}" class="user-cover" alt="">
              </div>
            </div>
          </c:if>
          
          <div style="margin: .5rem .75rem 0; background: #fff; line-height: 2rem;">
            <p class="text-center no-margin" style="font-weight: bold;font-size: .75rem; color: #cc0000;">点击右上角&nbsp;&nbsp;“...”&nbsp;&nbsp;邀请好友参与</p>
          </div>

          <div>
            <div class="video-layout">
              <div class="video-header" style="padding-top: 0;">
                <span style="font-size: .7rem; color: #d11b28;">初始体重</span><br>${userBet.beforeWeight}<span style="font-size: .9rem; font-weight: 500;">kg</span>
              </div>
              <div class="video-content">
                <c:if test="${not empty userBet.beforeVedio}">
                  <div id="uploadVideo" style="width: 100%; height: 11rem; position: relative;" data-video="${userBet.beforeVedio}">
                    <c:if test="${userBet.status eq 'OPEN'}">
                      <div class="close" style="position: absolute; text-align: center; right: 0px; top: 0px; z-index: 10000000; width: 80px; height: 30px; font-size: .7rem; color: #fff; line-height: 30px; background-color: rgba(201, 40, 59, .6); border-radius: 3px;">视频审核中</div>
                    </c:if>
                    <c:if test="${userBet.status eq 'OPENFAILED'}">
                      <div class="close reupload" style="position: absolute; text-align: center; right: 0px; top: 0px; z-index: 10000000; width: 80px; height: 30px; font-size: .7rem; color: #fff; line-height: 30px; background-color: rgba(201, 40, 59, .6); border-radius: 3px;">审核失败</div>
                    </c:if>
                  </div>
                </c:if>
                <c:if test="${empty userBet.beforeVedio}">
                  <img src="${ctx.resource}/images/bet-video.png" style="width: 100%; display: block;" alt="">
                </c:if>
              </div>
            </div>
            <c:if test="${not empty userBet.afterWeight}">
              <div class="video-layout">
                <div class="video-header" style="padding-top: 0;">
                  <span style="font-size: .7rem; color: #d11b28;">结果体重</span><br>${userBet.afterWeight}<span style="font-size: .9rem; font-weight: 500;">kg</span>
                </div>
                <div class="video-content">
                  <c:if test="${not empty userBet.afterVedio}">
                    <div id="uploadAfterVideo" style="width: 100%; height: 11rem; position: relative;" data-video="${userBet.afterVedio}">
                      <c:if test="${userBet.status eq 'CLOSE'}">
                        <div class="close" style="position: absolute; text-align: center; right: 0px; top: 0px; z-index: 10000000; width: 80px; height: 30px; font-size: .7rem; color: #fff; line-height: 30px; background-color: rgba(201, 40, 59, .6); border-radius: 3px;">视频审核中</div>
                      </c:if>
                      <c:if test="${userBet.status eq 'CLOSEFAILED'}">
                        <div class="close reupload" style="position: absolute; text-align: center; right: 0px; top: 0px; z-index: 10000000; width: 80px; height: 30px; font-size: .7rem; color: #fff; line-height: 30px; background-color: rgba(201, 40, 59, .6); border-radius: 3px;">审核失败</div>
                      </c:if>
                    </div>
                  </c:if>
                  <c:if test="${empty userBet.afterVedio}">
                    <img src="${ctx.resource}/images/bet-video.png" style="width: 100%; display: block;" alt="">
                  </c:if>
                </div>
              </div>
            </c:if>
          </div>
        </div>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/cmomon.js" />
  <script type="text/javascript">
      require(['page/common'], function(page) {
        page.init({
          "jsConfig": JSON.parse('${jsConfig}'),
          "avatar": '${user.avatar}',
          "url": window.__CTX__.domain + "/users/" + "${user.id}" + "/bets/"
                  + "${userBet.bet.id}" + "/share",
          "status": '${userBet.status}',
          "userName": '${userBet.user.nickname}',
          "endDate": "${userBet.bet.endDate}"
        })
      })
    </script>
</body>
</html>